<template>

  <div style="width: 100vw;height: calc(100vh - 64px);background: url(https://s1.hdslb.com/bfs/static/blive/blfe-message-web/static/img/infocenterbg.a1a0d152.jpg) top/cover no-repeat fixed;">

    <div style="width: 1200px;height: calc(100vh - 64px);margin: 0 auto;display: flex;position: relative;">
      <div id="left-box">

        <div style="width: 100%;height: 2rem;margin-top: 1.5rem;margin-bottom: 1.5rem;text-align: center;padding-left: 12px">
          <el-icon style="float: left;margin-left: 1rem;position: relative;top: 0.2rem">
            <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ba633cb8=""><path fill="currentColor" d="m64 448 832-320-128 704-446.08-243.328L832 192 242.816 545.472 64 448zm256 512V657.024L512 768 320 960z"></path></svg>
          </el-icon>
          <span style="font-weight: 600;float: left"> 消息中心</span>
        </div>

        <ul class="message-list">
          <li @click="switchMode('/message/love', $event)" class="message-item">&nbsp;&nbsp;收到的赞</li>
          <li @click="switchMode('/message/server', $event)" class="message-item">&nbsp;&nbsp;系统通知</li>
          <li @click="switchMode('/message/private', $event)" class="message-item">&nbsp;&nbsp;我的私信</li>
        </ul>

      </div>

      <div id="right-box">
        <div style="width: 100%;height: 52px;">
          <div style="padding: 10px 10px 0;">
            <div style="height: 42px;background-color: #fff;box-shadow: 0 2px 4px 0 rgba(121,146,185,0.54);padding: 0 16px;font-size: 15px;color: #666;border-radius: 4px;">
              <span style="position: relative;top: 10px;font-size: 16px">
                {{ title }}
              </span>
            </div>
          </div>
        </div>

        <div style="height: calc(100% - 66px);padding: 10px;position: relative">
          <router-view />
        </div>
      </div>
    </div>

  </div>

</template>

<script setup>
import {ref} from "vue";
import {useRouter} from "vue-router";

const activeTargetDiv = ref(void 0);
const title = ref("消息中心");

const router = useRouter();

function switchMode(url, event){
  let target = event.currentTarget;
  let activeTarget = activeTargetDiv.value;
  if (activeTarget){
    activeTarget.style.color="";
  }
  target.style.color="#2faee3";
  title.value = target.innerText || target.textContent;
  activeTargetDiv.value = target;

  router.push(url)
}

</script>

<style scoped>

#left-box{
  width: 140px;
  height: 100%;
  background-color: rgba(255,255,255,0.8);
}

#right-box{
  width: calc(100% - 140px);
  height: 100%;
  position: relative;
  background-color: rgba(255,255,255,0.5);
}

.message-list{
  display: block;
  list-style-type: disc;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin-inline-start: 0px;
  margin-inline-end: 0px;
  padding-inline-start: 26px;
}

.message-item{
  height: 40px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  position: relative;
  color: #6b757b;
  font-weight: bold;

  cursor: pointer;
}

.message-item:before{
  content: "\25cf";
  line-height: 20px;
}

</style>